<template>
  <div class="job-item" @click="bindGoDetail">
    <div class="flex justify-between align-center name-money">
      <div class="name">{{ people.resume.job }}</div>
    </div>
    <div class="flex align-center company" v-if="people.resume">
      <div class="tag-txt">{{ people.resume.degree }}</div>
      <div class="tag-txt">{{ people.resume.college }}</div>
      <div class="tag-txt">{{ people.resume.work_age }}年工作经历</div>

    </div>
    <div class="flex align-center tags" v-if="people.resume.tags">
      <div class="tag-btn money" v-for="item in people.resume.tags.split('，')">{{item}}</div>
    </div>
    <div class="flex justify-between align-center hr-stat">
      <div class="flex align-center hr">
        <image class="hr-icon" :src="people.avatar"></image>
        <div class="hr-name">{{ people.nickname }}</div>
      </div>
      <div class="star " >
<!--        <image class="star-icon" src="/static/img/tel.png"></image>-->
        <image @click.stop="bindBtn"  class="star-icon" src="/static/img/tela.png"></image>
<!--        <image class="star-icon" src="/static/img/collect.png"></image>-->
<!--        <image class="star-icon" src="/static/img/collecta.png"></image>-->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {goUrl} from "../utils/UniUtil";
import {collectPeople_data} from "../api/user";

const props = defineProps({
  people: Object,
})

const bindGoDetail = () => {
  goUrl('/pages/mine/detail?id='+ props.people.id)
}

const bindCollect = () => {
  collectPeople_data(props.people.resume.id).then(res => {
    // todo
  })
}

const emit = defineEmits(['btn'])
const bindBtn = () => {
  emit('btn', 'tel')
}
</script>

<style lang="scss" scoped>
.job-item {
  //height: 284rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 32rpx;
  .tag-btn {
    height: 40rpx;
    background: rgba(36, 250, 246, 0.38);
    border-radius: 16rpx;
    padding: 0 16rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #0D3333;
  }
  .tag-txt {
    height: 34rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #0D3333;
    line-height: 34rpx;
  }
  .name-money {
    padding: 0 0 24rpx;
    .name {
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #0D3333;
      line-height: 44rpx;
    }
  }
  .company {
    padding: 0 0 16rpx;
    gap: 48rpx;
  }
  .tags {
    padding: 0 0 28rpx;
    gap: 16rpx;
  }
  .hr-stat {
    .hr {
      .hr-icon {
        width: 42rpx;
        height: 42rpx;
        border-radius: 50%;
      }
      .hr-name {
        height: 42rpx;
        line-height: 42rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: #0D3333;
        padding: 0 16rpx;
      }
    }
    .star {
      display: flex;
      align-items: center;
      gap: 20rpx;
      //width: 42rpx;
      height: 42rpx;
      .star-icon{
        width: 42rpx;
        height: 42rpx;
        //background: #0D3333;
      }
    }
  }
}
</style>
